<template>
	<view>
		<block v-for="(item,index) in list" :key="item.id">
			<!--话题内容-->
			<view class="topic-item u-padding-30" @tap="jump('/pages/topic/topic', { id: item.id })">
				<!--用户信息-->
				<view class="topic-item-user u-flex">
					<u-avatar :src="item.avatar" size="mini"></u-avatar>
					<text class="nickname u-margin-left-20">{{item.nickname}}</text>
				</view>
				<!--帖子内容-->
				<view class="topic-item-content u-margin-top-20">
					<rich-text class="post-text" :nodes="item.text"></rich-text>
					<!--1张图-->
					<view class="u-margin-top-30" v-if="item.images.length == 1">
						<image :lazy-load="true" mode="aspectFill" :src="item.images[0]" class="img-style-1"
							@tap.stop="previewImage(item.images[0],item.images)">
						</image>
					</view>
					<!--2张图-->
					<view v-if="item.images.length == 2">
						<view class="img-style-2">
							<image :lazy-load="true" v-for="(mediaItem, index2) in item.images" :key="index2"
								mode="aspectFill" :src="mediaItem" @tap.stop="previewImage(mediaItem,item.images)">
							</image>
						</view>

					</view>
					<!--3张以上-->
					<view v-if="item.images.length > 2">
						<view class="img-style-3">
							<image :lazy-load="true" v-for="(mediaItem, index2) in item.images" :key="index2"
								mode="aspectFill" :src="mediaItem" @tap.stop="previewImage(mediaItem,item.images)">
							</image>
						</view>
					</view>
					<!--地理位置-->
					<view class="address u-m-t-20" v-if="item.address">
						<u-icon class="icon" name="map"></u-icon>
						<text>{{item.address}}</text>
					</view>

					<!--页脚-->
					<view class="foot u-flex u-row-between u-m-t-30">
						<view class="foot-item">
							<u-tag :text="'#'+item.name+'#'" shape="circle" type="primary" size="mini" mode="plain" />
						</view>
						<view class="u-flex">
							<view class="foot-item u-m-r-15">
								<u-icon name="eye" size="38"></u-icon>
								<text class="u-m-l-8">{{item.views}}</text>
							</view>
							<view class="foot-item">
								<u-icon name="chat" size="38"></u-icon>
								<text class="u-m-l-8">{{item.reviews}}</text>
							</view>
						</view>
					</view>


				</view>
			</view>
		</block>

	</view>
</template>

<script>
	export default {
		props: {
			list: Array,
			loadStatus: String,
			handle: {
				default: false,
				type: Boolean
			},
			showTopic: {
				default: true,
				type: Boolean
			},
			customStyle: {
				marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
				color: 'red'
			},

		},
		data() {
			return {

			}
		},
		watch: {

		},
		created() {

		},
		methods: {
			previewImage(url, urls) {
				uni.previewImage({
					current: url, // 当前显示图片的http链接
					urls: urls // 需要预览的图片http链接列表
				})
			},
			jump(path, query) {
				this.$Router.push({
					path: path,
					query: query
				});
			}

		}
	}
</script>

<style lang="scss" scoped>
	//话题列表样式
	.topic-item {
		width: 100%;
		height: auto;
		line-height: 1.5em;
		background: #FFFFFF;
		margin-bottom: 10rpx;
		overflow: hidden;
		padding-bottom: 20rpx;

		.topic-item-content {
			.img-style-1 {
				display: block;
				width: 100%;
				max-height: 600rpx;
				border-radius: 5px;
				overflow: hidden;
			}

			.img-style-2 {
				display: flex;

				image {
					margin: 5rpx;
					border-radius: 5px;
					width: 100%;
					height: 294rpx;
				}
			}

			.img-style-3 {
				display: flex;
				flex-wrap: wrap;

				image {
					width: 31.3%;
					height: 200rpx;
					margin: 1%;
					border-radius: 5px;
				}

			}

		}
	}

	/*卡片底部
	.card-foot {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
		padding: 20upx 0;

		.card-foot-item {
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;

			text {
				color: #222;
				font-size: 34upx;
			}
		}
	}*/
	//转发按钮
	/*.userLogin {
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		opacity: 0;
		position: absolute;
	}
	button {
			padding: 0;
			margin: 0;
			border-radius: 0;
			background-color: transparent;
		}*/
</style>
